<template>
  <div class="custon-timer-box">
    <div class="custon-timer-line">
      <ul class="custon-timer-body">
        <li v-for="(item,index) in timerData" :key="index">
          <span :class="className + item.className"></span>
          <span class="custon-timer-label">{{item.name}}</span>
          <span class="custon-timer-data">{{item.infor}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    timerData: {
      type: Array,
      default: () => {
        return [
          { name: '明港镇', infor: '326 起', className: 'custon-timer-circle-active' },
          { name: '五里镇', infor: '169 起' },
          { name: '龙井乡', infor: '138 起' },
          { name: '王岗乡', infor: '128 起' },
          { name: '高粱店乡', infor: '116 起' },
          { name: '洋河镇', infor: '99 起' },
          { name: '平昌关镇', infor: '80 起' }
        ]
      }
    }
  },
  data () {
    return {
      className: 'custon-timer-circle '
    }
  }
}
</script>

<style>
.custon-timer-box{
  padding: 0 14px 0 22px;
}
.custon-timer-line{
  border-left: 1px solid #33acff;
  margin: 10px 0 0 10px;
  color: white;
  font-family: '微软雅黑'
}
.custon-timer-body{
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  margin: -4px 0 0 -9px;
}
.custon-timer-body li{
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 14px;
  position: relative;
}
.custon-timer-body li .custon-timer-circle{
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid #33acff;
  border-radius: 8px;
  background-color: #111846;
  margin-bottom: -3px;
}
.custon-timer-circle-active{
  background-color: #33acff !important;
}
.custon-timer-body li .custon-timer-label{
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 28px;
}
.custon-timer-body li .custon-timer-data{
  display: inline-block;
  position: absolute;
  top: 2px;
  right: 0;
  color: #9efbbc;
}
</style>
